/**
 * 
 * 当前文件被自动注册到vue router（在配置文件中先定义），路由名和模块名默认都为 ar_文件名
 * 
 */
define("ar_mermaid", ['vue', 'gitee', 'utils',
    '/cdn/mermaid.min.js'
], function (Vue, gitee, utils, mermaid) {

    var config = {
        startOnLoad: false,
        flowchart: {
            useMaxWidth: false,
            htmlLabels: true
        }
    };

    mermaid.initialize(config);

    let cps = {

        data() {
            return {
                svgView: ""
            }
        },

        mounted() {
            var graphDefinition = 'graph TB\na-->b';
            var graph = mermaid.mermaidAPI.render('mermaid-hello', graphDefinition);
            this.svgView = graph;
        },

        template: `
            <div class="ui container mt-3">
                <h3>Mermaid绘图</h3>
                <div>
                    <div v-html="svgView"></div>
                </div>
            </div>
        `,

    };

    return {
        cps
    }

});